<template>
  <div class="navBar">
    <van-row>
      <van-col span="5" style="color: #fff;">
        <span class="qrCode" v-show="$route.path === '/Dashbord'">
          <van-icon name="scan" v-if="user.userType === '02' && user.userStatus !== '4'" @click="startScan" />
        </span>
        <div>
          <span v-if="$route.path === '/My' || $route.path === '/Work' ||　$route.path === '/Dashbord'　|| $route.path === '/Message' || $route.path === '/ApplyMessage' "></span>
          <svg-icon v-else style="padding-left: 1.5625rem;" icon-class="back-gray" @click.native="back" />
        </div>
      </van-col>
      <van-col span="14" class="navTitle">
        <span>{{ title }}</span>
        <slot name="center"></slot>
      </van-col>
      <van-col span="5" style="text-align: right;padding-right: 0.9375rem;">
        <slot name="right"></slot>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  import Store from '../utils/store.js'
  import messageAPI from '../api/messageAPI.js'
  export default {
    props: ['title', 'rightText'],
    data() {
      return {
        user: {
          userStatus: '',
          userType: '',
        }
      }
    },
    methods:{
      getMessageCount() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessageCount(projectId).then(res => {
          Store.commit('changeNum', res)
        })
      },
      // 扫码进入项目
      startScan() {
        this.$router.push({
          name: 'Apply'
        })
      },
      // 返回
      back() {
        if (this.$route.path === '/InitiateRealTime') {
          this.$router.push({
            path: '/RealTimeInspection'
          })
        } else if (this.$route.path === '/PlateOcr') {
          this.$router.push({
            path: '/CarOut'
          })
        } else if (this.$route.path === '/SignScan') {
          this.$router.push({
            path: '/SignManage'
          })
        } else if (this.$route.path === '/CarOut' || this.$route.path === '/FixedInspection' || this.$route.path === '/RealTimeInspection' || this.$route.path === '/SignManage' || this.$route.path === '/HotCardManage' || this.$route.path === '/OvertimePayManage') {
          this.$router.push({
            path: '/Work'
          })
        } else if (this.$route.path === '/ApplyMessage') {
          this.$router.push({
            path: '/'
          })
        } else if (this.$route.path === '/') {
          return
        } else {
          this.$router.go(-1)
        }
      }
    },
    mounted() {
      let projectId = localStorage.getItem('projectId')
      if (localStorage.getItem('token') !== null && projectId) {
        this.getMessageCount()
        let timeVal = setInterval(function() {
          messageAPI.getMessageCount(projectId).then(res => {
            Store.commit('changeNum', res)
          })
        }, 5000)
        this.$once('hook:beforeDestroy', () => {
            clearInterval(timeVal);
        })
      }
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
    }
  }
</script>

<style scoped lang="scss">
  .navBar {
    font-weight: bold;
    font-size: 1.25rem;
    z-index: 10;
    width: 100%;
    color: #333;
    background-color: #fff;
    height: 4.75rem;
    line-height: 6rem;
    position: fixed;
    top: 0;
    left: 0;
    .qrCode{
      color: #666;
      font-size: 1.5rem;
      padding-left: 1.5625rem;
    }
    .navTitle{
      text-align: center;
    }
  }
</style>
